import React, {useState} from 'react';
import {Timeline, Tooltip, Empty} from 'antd';
import './index.styl';
import {ExclamationCircleOutlined} from '@ant-design/icons';
import {useUpdateEffect} from 'ahooks';
import moment from 'moment';

import {roomMessageMap} from '~/page/liveMonitor/config.js';

const {Item} = Timeline;
export default ({data, title}) => {
    const [columnList, setColumnList] = useState([]);
    const [value, setValue] = useState([]);
    const {dashBoardId, unitId} = roomMessageMap.get(title);

    useUpdateEffect(() => {
        if (data && data[dashBoardId] && data[dashBoardId][unitId]) {
            setColumnList(data[dashBoardId][unitId]?.columnList ?? []);
            setValue(data[dashBoardId][unitId]?.value ?? []);
        }
    }, [data, dashBoardId, unitId]);

    const keys = columnList?.map(item => item.name);

    const [
        time = '事件发生时间',
        role = '用户角色',
        event = '事件名称',
        remark = '备注信息',
        source = '事件源头',
    ] = keys;

    return (
        <div className="teacher-events">
            {
                value?.length > 0
                    ? (
                        <Timeline mode="left">
                            {
                                value?.map(item => (
                                    <Item label={moment(item[time]).format('HH:mm:ss')} key={item[time] + item[event]}>
                                        <span className="source-item">{item[source]}&nbsp;&nbsp;</span>
                                        <span className="event-item">{`${item[role]}${item[event]}`}</span>
                                        {
                                            item[remark] && (
                                                <span>
                                                    &nbsp;&nbsp;
                                                    <Tooltip title={item[remark]}>
                                                        <ExclamationCircleOutlined style={{color: '#939DB1'}} />
                                                    </Tooltip>
                                                </span>
                                            )
                                        }
                                    </Item>
                                ))
                            }
                        </Timeline>
                    )
                    : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            }
        </div>
    );
};
